<!DOCTYPE html "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- **********************************************************************
  スタイル定義
********************************************************************** -->
<style type="text/css">
* {margin:0;padding:2px;}
body {
line-height:150%;
font-size:110%;
font-family:'DejaVu Sans';
}
input[type="text"], select {
padding:2px;
font-size:85%;
font-family:'DejaVu Sans';
border:1px solid #ccc;
}
button {padding:2px;font-size:100%;}
/* ==================================================================== */
#hashForm .glow-errorMsg {
font-weight:bold;
color:#900;
}
#hashForm .glow-errorSummary {
display:none;
width:90%;
border-left:6px solid #b00;
background-color:#ffa;
padding:4px 10px;
margin-bottom:30px;
}
#hashForm .glow-errorSummary>ul {
margin-left:20px;
}
/* ==================================================================== */
div._contents {
position:relative;
display:block;
top:50px;
left:30px;
}
div._cmdbtn {
position:relative;
display:block;
top:10px;
}
div._result {
position:relative;
display:block;
top:30px;
color:#00f;
}
</style>
<!-- **********************************************************************
  クライアント・アプリケーション定義
********************************************************************** -->
<script type="text/javascript" charset="utf-8" src="glow/1.5.1/core/core.js"></script>
<script type="text/javascript" charset="utf-8" src="prettyprint/prettyprint.js"></script>
<script type="text/javascript">// <![CDATA[
/**
 * DOM構築完了を見据えた定義
 * 　・Glowを使ったイベント登録
 */
glow.ready(function() {
    var GDOM = glow.dom;
    var GEVT = glow.events;
    
    /* リクエストデータ */
    var param = {};
    
    // 入力検証の実施（※ページロード直後に行われる。）
    SampleApp.validate();
    
    /* ボタン押下イベントハンドラーの登録 */
    GEVT.addListener('#execHash', 'click', function() {
        // リクエストデータ生成
        param['algos']  = GDOM.get('#algos').val();
        param['userid'] = GDOM.get('#uid').val();
        param['passwd'] = GDOM.get('#pwd').val();
        
        // 暗号化処理の呼び出し
        SampleApp.getHash(param);
    });
});
/**
 * クライアント・アプリケーション
 */
SampleApp = function() {
    var GDOM = glow.dom;
    var GNET = glow.net;
    var GFORM = glow.forms;
    
    return {
        /**
         * 入力検証。
         * Glowのformsを使った入力検証を実施する。
         */
        validate:function() {
            var _hForm = new GFORM.Form('#hashForm');
            _hForm
                .addTests(
                    'userid',
                    ['required',{
                        on:'change submit',
                        message:'必ずユーザーIDを入力して下さい。'
                    }]
                )
                .addTests(
                    'passwd',
                    ['required',{
                        on:'change submit',
                        message:'必ずパスワードを入力して下さい。'
                    }],
                    ['minLen',{
                        on:'change',
                        arg:8,
                        message:'最低８文字の長さを指定して下さい。'
                    }]
                );
            
            _hForm.validate('submit');
        },
        /**
         * POST非同期通信。
         * POSTでクライアントデータを受け渡し、暗号化データを返却してもらう。
         * 返却された暗号化データを画面へ出力する。
         * 
         * @param req
         *     リクエストデータ
         */
        getHash:function(req) {
            GNET.post('hash_gen.php', req, {
                async:true,
                // 正常処理コールバック
                onLoad:function(resp) {
                    var _data = resp.json();
                    GDOM.get('#result').html('結果： '+_data.hash+" ("+_data.len+")");
                    //var _dump = prettyPrint(_data);
                    //GDOM.get('#debug').append(_dump);
                },
                // エラー処理コールバック
                onError:function(resp) {
                    alert("Error !!\n"+resp.statusText());
                },
                // タイムアウト（秒）
                timeout:10
            });
        }
    };
}();
// ]]>
</script>
</head>

<body>

<h1>HASH Generated Sample</h1>

<div class="_contents">
    <form id="hashForm">
    <p>
        <label for="algos">アルゴリズム
        <select id="algos" name="algos">
        <?php
        $algos = hash_algos();
        foreach($algos as $ix=>$name) {
            if (strcmp($name, "md5") == 0) {
                printf("<option value='%s' selected='selected'>%s</option>\n",$name, $name);
            } else {
                printf("<option value='%s'>%s</option>\n",$name, $name);
            }
        }
        ?>
        </select>
        </label>
    </p>
    <p>
        <label for="uid">ユーザーID
        <input type="text" id="uid" name="userid" size="20">
        </label>
    </p>
    <p>
        <label for="pwd">パスワード
        <input type="text" id="pwd" name="passwd" size="20">
        </label>
    </p>
    </form>
    
    <div class="_cmdbtn">
        <button type="button" id="execHash">ハッシュ値を取得する</button>
    </div>
    
    <div id="result" class="_result"></div>
    <div id="debug"></div>
</div>

</body></html>